<template>
  <view class="box">
    <view class="box1" @click="back">
      <uv-icon name="arrow-left" color="#fff"></uv-icon>
      <view class="box11">伴宠人员入驻</view>
    </view>
    <view class="box2">
      <view class="box21">
        <view class="box2-1">
          <view class="box21-1">
            <!-- <image src="/static/image/zfb.png" mode=""></image> -->
          </view>
          <view class="box21-2">
            实名认证
          </view>
        </view>
        <view class="box211" style="border-bottom: 1px solid #ccc;">
          <view class="box21-1">姓名</view>
          <view class="box21-2">
            <input type="text" placeholder="请输入姓名" />
          </view>
        </view>
        <view class="box211">
          <view class="box21-1">身份证号</view>
          <view class="box21-2">
            <input type="text" placeholder="请输入身份证号" />
          </view>
        </view>
      </view>

      <view class="box21">
        <view class="box2-1">
          <view class="box21-1">
            <!-- <image src="/static/image/zfb.png" mode=""></image> -->
          </view>
          <view class="box21-2">
            基本信息
          </view>
        </view>
        <view class="box211" style="border-bottom: 1px solid #ccc;">
          <view class="box21-1">联系电话</view>
          <view class="box21-2">
            <input type="text" placeholder="请输入联系电话" />
          </view>
        </view>
        <view class="box211" style="border-bottom: 1px solid #ccc;">
          <view class="box21-1">所在地址</view>
          <view class="box21-2" @click="openPicker">
            {{dizhi}}
            <uv-icon name="arrow-right" size="25" color="#909399"></uv-icon>
            <uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>
          </view>
        </view>
        <view class="box211">
          <view class="box21-1">详细地址</view>
          <view class="box21-2">
            <input type="text" placeholder="请输入详细地址" />
          </view>
        </view>
      </view>
    </view>
    <button class="btn">确认提交</button>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue';
  const picker = ref(null)
  const columns = ref([
    ['济南', '青岛', '淄博', '枣庄', '东营', '烟台', '潍坊', '济宁', '泰安', '威海', '日照', '滨州', '德州', '聊城', '临沂', '菏泽']
  ])
  const dizhi = ref('请选择~')
  const openPicker = (() => {
    picker.value.open()
  })
  const confirm = ((e) => {
    console.log('confirm', e.value[0]);
    dizhi.value = e.value[0]
  })
  const back = (() => {
    uni.navigateBack({
      delta: 1, // 返回1个，如果是2，返回2个页面
    });
  })
</script>

<style lang="scss">
  @import url("banchongryrz.scss");
</style>